<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-submenu v-for="i in week_num" :index="String(i)" v-model="info">
          <template slot="title">
            <span class="title" v-for="item in info" v-if="item.week==i&&item.day==1">第{{i}}周</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="item in info" v-if="item.week==i&&item.day==1" :class="{select:item.name=='休息',daka:item.daka==true}" @click="get_coursename(item.name,item.id)"><span>{{item.day}}天</span><span>{{item.name}}</span></el-menu-item>
            <el-menu-item v-for="item in info" v-if="item.week==i&&item.day!=1" :class="{select:item.name=='休息',daka:item.daka==true}" @click="get_coursename(item.name,item.id)"><span>{{item.day}}天</span><span>{{item.name}}</span></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>


</template>

<script>
  export default {
    data(){
      return{
        week_num:"",
        info:"",
        select_index:0
      }
    },
    created() {
      var this_=this
      this_.$axios.get('http://127.0.0.1:8080/traning/jihua_detail',{params: {
          id: this_.$store.state.click_index_planid
        }})
        .then(function (response) {
          if(response) {
            this_.info = response.data;
            var j = response.data.length
            console.log(Math.ceil(j / 7));
            this_.week_num = Math.ceil(this_.info.length / 7);
            console.log(this_.week_num);
          }
        })
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
      ,

      get_coursename: function (course, richengId) {
        if(course!="休息"){
        this.$store.state.course_name = course
        this.$store.state.richeng_id = richengId

        var this_=this
        this_.$axios.get('http://127.0.0.1:8080/traning/getcourse_byname',{params: {
            course_name: this_.$store.state.course_name
          }})
          .then(function (response) {
            this_.$store.state.course_info=response.data
            this_.$store.state.video_info=this_.$store.state.course_info[0]

          })
          this_.$router.push('/blank');
       }
      }
    }
  }
</script>

<style scoped>
  li{
    width: 280px;
    border-radius:0;
  }
  .el-menu-item span{
    margin-left: 10px;
  }
  .el-menu-item:hover span{
    color: red;
  }
  .el-submenu .title{
    margin-left: 80px;
  }
  span{
    color: black;
  }
  .select{
    background: #D7D7D7;
  }
  .select:hover span{
    color: black;
  }
  .daka{
    color: #409EFF;
  }
  .daka:hover span{
    color: black;
  }
</style>
